<template>
  <div class="projectManage">
    <c-title :hide="false" :text="'预约管理'"></c-title>
    <van-search v-model="keyword" placeholder="请输入项目名称" @search="onSearch" />
    <div class="list">
      <div class="lis">
        <div class="no">ID:123</div>
        <div class="detail">
          <div class="img">
            <img src="" alt="" />
          </div>
          <div class="right">
            <div class="title">项目名称1</div>
            <div class="technician">技师 陈考</div>
            <div class="right_b">
              <div class="time"><i class="iconfont icon-icon_time1"></i>2024.03.13 12:04</div>
              <div class="replace">更换技师</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listData: [],
      keyword: "",

      page: 1, //分页数，当前页数
      isLoadMore: true, //判断是否要加载更多的标志
      total_page: 0 //总页数
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
      this.listData = [];
    },
    async getData() {
      let { data, result, msg } = await $http.post("plugin.appointment.frontend.project-goods.get-order-serviec-list", {}, ".");
      console.log(data, result, msg);
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  margin: 0 0.75rem;
  overflow: hidden;
  margin-top: 0.63rem;
  .lis {
    padding: 0.91rem 0.63rem 0.63rem 0.63rem;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0.5rem;
    .no {
      font-weight: 500;
      font-size: 0.88rem;
      text-align: left;
      margin-bottom: 0.75rem;
    }
    .detail {
      display: flex;
      justify-content: space-between;
      .right {
        flex: 1;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          font-weight: 500;
          font-size: 0.88rem;
          line-height: 1rem;
        }
        .technician {
          font-size: 0.81rem;
          color: #3b3b4a;
          line-height: 0.9rem;
          margin-top: 0.44rem;
        }
        .right_b {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .time {
            font-size: 0.81rem;
            color: #f15353;
            display: flex;
            align-items: center;
            .icon-icon_time1 {
              font-size: 1rem;
            }
          }
          .replace {
            padding: 0.47rem 0.75rem;
            background: #f15353;
            border-radius: 1.88rem;
            color: #fff;
            font-size: 0.81rem;
          }
        }
      }
    }
    .img {
      flex-shrink: 0;
      width: 4.63rem;
      height: 4.63rem;
      background: #f0f0f1;
      border-radius: 0.5rem;
      margin-right: 0.5rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
